import React from 'react'
import { render } from 'react-dom'
import {Button, message, Modal,Collapse,Table, Divider, Tag,Icon} from 'antd'
import 'whatwg-fetch'
import './index.less'
import axios from 'axios'
import {PATH,URL} from '../../../utils/urls'
import Map from '../../../images/svg/map2.svg';
import BreadcrumbCustom from "../../../components/BreadcrumbCustom";

const {Panel}=Collapse;

export default class SceneSetUp extends React.Component {
    columns = [
        {
            title: '预览',
            dataIndex: 'preview',
            key: 'preview',
            render:(text, record)=>(
                <img src={record.preview} className="wrapper-class-name"/>
            )
        },
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <div>
                    <div>
                        <Button className="mainSceneBtn" onClick={this.mainSceneChangeClick.bind(this,{record})}>修改底图</Button>
                    </div>
                    <div>
                        <Button className="mainSceneBtn" onClick={this.setMainSceneCell.bind(this,{record})}>设置场景元素</Button>
                    </div>
                </div>
            ),
        },
    ];

    columns2 = [
        {
            title: '图标',
            dataIndex: 'sceneIcon',
            key: 'sceneIcon',
            render:(text, record)=>(
                <img src={record.sceneIcon} className="wrapper-class-name1"/>
            )
        },
        {
            title: '预览',
            dataIndex: 'sceneImg',
            key: 'sceneImg',
            render:(text, record)=>(
                <img src={record.sceneImg} className="wrapper-class-name2"/>
            )
        },
        {
            title: '名称',
            dataIndex: 'sceneName',
            key: 'sceneName',
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <div>
                    <Button className="areabtn" onClick={this.changeAreaScene.bind(this,{record})}>修改</Button>
                    <Button className="areabtn" onClick={this.setAreaSceneCell.bind(this,{record})}>设置场景元素</Button>
                    <Button className="areabtn" onClick={this.delectAreaScene.bind(this,{record})}>删除</Button>
                </div>
            ),
        },
    ];

    data2 = [
        {
            key: '1',
            icon:Map,
            preview: Map,
            name:'区域1'
        },{
            key: '2',
            icon:Map,
            preview: Map,
            name:'区域2'
        },{
            key: '3',
            icon:Map,
            preview: Map,
            name:'区域3'
        },{
            key: '4',
            icon:Map,
            preview: Map,
            name:'区域4'
        }
    ];
    constructor(props) {
        super(props)
        this.state = {
            addBtnVisible:true,//是否显示新增主背景按钮
            mainSceneData:[],
            areaSceneData:[]
        }
    }

    /**
     * 修改底图
     * @param props0
     */
    mainSceneChangeClick=(props0)=>{
        console.log(props0);
        let path = {
            pathname:"/changemainscene",
            state:props0.record
        }
        this.props.history.push(path);
    }

    /**
     * 设置场景元素
     * @returns {*}
     */
    setMainSceneCell =(props0)=>{
        let path = {
            pathname:"/setmainscenes",
            state:props0.record
        }
        this.props.history.push(path);
    }

    /**
     * 区域场景修改
     * @returns {*}
     */
    changeAreaScene=(props0)=>{
        let path={
            pathname:"/changeareascene",
            state:props0.record
        }
        this.props.history.push(path);
    }

    /**
     * 设置区域场景元素
     * @returns {*}
     */
    setAreaSceneCell=(props0)=>{
        let path = {
            pathname:"/setareacell",
            state:props0.record
        }
        this.props.history.push(path);
    }

    /**
     * 删除区域场景
     * @returns {*}
     */
    delectAreaScene=(props)=>{
        Modal.confirm({
            title: '提示',
            content: '是否确认删除？',
            onOk:this.delectAreaSceneFun.bind(this,{props}),
            okText: '确认',
            cancelText: '取消',
        });
    }

    /**
     * 删除区域场景
     * @returns {*}
     */
    delectAreaSceneFun(props){
        axios.post(PATH.removeAreaScene+"?ids="+props.props.record.id,{
        },{headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(response=>{
            console.log(response);
            if(response.data.code == 0){
                message.success(response.data.msg);
            }else{
                message.error(response.data.msg);
            }
        })
    }

    componentDidMount(){
        //获取主底图资源
        this.getMainSceneFun();
        //获取区域场景资源列表
        this.getAreaSceneFun();
    }

    /**
     * 获取主底图资源
     * mainSceneImg
     * @returns {*}
     */
    getMainSceneFun=()=>{
        axios.get(PATH.getMineScene,{})
            .then(response=>{
                console.log(response);
                if(response.data.code == 0){
                    let mainSceneData = {
                        ...this.state.mainSceneData[0],
                        preview:URL+response.data.data.mainSceneImg
                    }
                    this.setState({
                        mainSceneData:[mainSceneData]
                    })
                    console.log(this.state.mainSceneData);
                }else{
                    message.error(response.data.msg)
                }
            })
    }

    /**
     * 获取区域场景资源列表
     */
    getAreaSceneFun=()=>{
        axios.post(PATH.getSceneList,{})
            .then(response=>{
                console.log(response);
                if(response.data.code == 0){
                    this.setState({
                        areaSceneData:response.data.data
                    })
                }else{
                    message.error(response.data.msg);
                }
            })
    }

    /**
     * 获取主底图
     * @returns {*}
     */
    getMainScene(){

    }

    /**
     * 添加区域场景
     * @returns {*}
     */
    addAreaFun=()=>{
        let path = {
            pathname:"/changeareascene",
        }
        this.props.history.push(path);
    }

    /**
     * 添加主场景
     * @returns {*}
     */
    addMainSceneFun=()=>{
        let path = {
            pathname:"/changeareascene",
        }
        this.props.history.push(path);
    }

    render() {
        let style = {
            display:this.state.addBtnVisible?"none":"block"
        }
        return (
            <div id="sceneManagerDiv">
                <BreadcrumbCustom first="配置管理" second="场景配置" />
                <Collapse defaultActiveKey={['1']} className="mainSceneClass">
                    <Panel showArrow={false} header="主场景配置" key="1">
                        <Table columns={this.columns} dataSource={this.state.mainSceneData} bordered pagination={false}/>
                        <Button style={style} id="addAreaSceneBtn" onClick={this.addMainSceneFun}>添加主场景</Button>
                    </Panel>
                </Collapse>
                <Collapse defaultActiveKey={['1']} className="areaSceneClass">
                    <Panel showArrow={false} header="区域场景配置" key="1">
                        <Table columns={this.columns2} dataSource={this.state.areaSceneData} bordered pagination={false}/>
                        <Button id="addAreaSceneBtn" onClick={this.addAreaFun}>添加区域场景</Button>
                    </Panel>
                </Collapse>
            </div>
        )
    }
}